<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.bigBox{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="app"></div>
		
	</body>
	<script type="text/babel">
		
		// 组件三
		var MyBox = React.createClass({
			// 初始化state值
			getInitialState(){  
				return{
					aaaa:100
				}
			},
			// 自定义事件
			add(){
				// 错误：  state不能直接被修改！！！
				//     this.state.aaaa++;
				// 使用setState方法
				/*console.log(this.state.aaaa)
				var num= this.state.aaaa;
				num++;
				this.setState({
					aaaa:num
				})*/
				this.setState(function(state){
					return {
						aaaa:state.aaaa + 1
					}
				})
				/*this.replaceState(function(state){
					return {
						cccc:200
					}
				})*/
			},
			getDOM(){
				console.log( this.isMounted() )
				var span = ReactDOM.findDOMNode(this.refs.demo)
				console.log(span)
			},
			// 渲染
			render(){
				console.log( this.isMounted() )
				return(
					<div className="bigBox">
						<h3 tabIndex="0">{this.props.name}==>{this.props.title}</h3>
						<h4>{this.state.aaaa}</h4>
						<span ref="demo">123123</span>
						<button onClick={ this.add }>添加</button>
						<button onClick={ this.getDOM }>获取</button>
					</div>
				)
			}
		})
		
		
		// 渲染
		var app = document.getElementById("app");
		ReactDOM.render(<MyBox name="陈珏舟" title="很丑！" />, app)
		// 注意“： 组件名首字母大写
	</script>
</html>
